<template>
    <div class="customer">
      <van-search class="member-search"
                  v-model="value"
                  show-action
                  @search="onSearch"
                  placeholder="请输入经销商名字"
      >
        <div slot="action" v-if="!searchStatus" @click="onSearch" style="margin-left:10px;">搜索</div>
        <div slot="action" v-else  style="margin-left:10px;">搜索</div>
      </van-search>

      <div class="customer-content" >

        <van-list
          v-model="loading"
          :finished="finished"
          @load="getCustomerList"
        >
          <van-row  >
            <van-col span="24" v-if="typeof customerList=='string'" style="color:#ddd;padding:10px;background: #fff;">{{customerList}}</van-col>

            <van-col span="24" v-else  v-for="(val,index) in customerList" :key="index" style="padding:10px 0;background: #fff;margin-bottom:5px;
    border-radius: 3px;" @click.native="customerInfo(val.id)">
              <van-row style="text-align: left;padding-left:15px;" >
                <van-col span="12">
                  <van-row style="padding:4px 0;">
                    <van-col span="24">
                      <i class="iconfont icon-ai-user"></i>{{val.title}}
                    </van-col>
                  </van-row>
                  <van-row style="padding:4px 0;">
                    <van-col span="24" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                      <i class="iconfont icon-ziyuan2"></i>
                      <span v-if="val.regions_name.length>0">{{val.regions_name}}</span>
                      <span v-else style="color:#ddd;">未设置</span>
                    </van-col>
                  </van-row>
                </van-col>
                <van-col span="12" style=";padding:0 15px;">
                  <van-row style="padding:4px 0;">
                    <van-col span="24">
                      <i class="iconfont icon-huiyuan"></i>
                      <span v-if="val.level!=null">{{val.level.level_name}}</span>
                      <span v-else style="color:#ddd;">暂无等级</span>
                    </van-col>
                  </van-row>
                  <van-row style="padding:4px 0;">
                    <van-col span="24">
                      <i class="iconfont icon-unie64e"></i>

                      <van-button style="border:0!important;" v-if="val.related_tid==0" disabled>未绑定</van-button>
                      <van-button v-else style="background: #3C8DBC;color:#fff;border:0!important;" >已绑定</van-button>
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
            </van-col>

          </van-row>
          <div class="noDatas" :style="{display:block}">
            数据已加载完
          </div>
        </van-list>



      </div>

      <!--返回按钮-->
      <backs></backs>

      <!--底部-->
      <van-row class="customer-footer" >
        <van-col span="24"><span style="color:#01A761">{{total}}</span>人</van-col>
      </van-row>
    </div>
</template>

<script>
  import backs from "@/components/menu/backPrev";
    export default {
        name: "customer",
        components: {
          backs
        },
        data(){
          return {
            searchStatus:0,
            value:"",
            block:"none",
            customerList:[],
            currentPage:1,//当前页
            pageSize:10,//每页显示10条
            total:0,

            loading: false,
            finished: false
          }
        },
        methods:{
          onSearch(){
            this.customerList=[];
            this.currentPage=1;
            this.searchStatus=1;
            this.loading=true;
            this.finished=false;
            this.getCustomerList();

          },
          //获取客户列表
          getCustomerList(){
            var $this=this;
            this.$http.setting.get('customer',{
              params:{
                title:$this.value,
                pagesize:$this.pageSize,
                current_page:$this.currentPage,
                page:$this.currentPage
              }
            })
              .then(function (response) {
                var empId = localStorage.getItem('empId')
                if(empId&&response.data.code){
                  $this.$toast.fail(response.data.message);
                  $this.$router.go(-1)
                  return;
                }
                //总条数
                $this.total=response.data.data.total;
                // console.log(response.data.data);
                //当前的下一页
                $this.currentPage=response.data.data.current_page+1;
                // $this.customerList=response.data.data.data;
                for (let i = 0; i < response.data.data.data.length; i++) {
                  $this.customerList.push(response.data.data.data[i]);
                }
                $this.loading = false;

                if(!response.data.data.data.length){
                  $this.customerList="未找到相关数据";
                  $this.finished = true;
                }else if ($this.customerList.length >= response.data.data.total) {
                  $this.finished = true;
                  $this.block = 'block'
                }

                $this.searchStatus=0;
              })
              .catch(function (error) {
                $this.$toast.fail('登陆过期，请重新登陆');
                console.log(error);
              });
          },
          //跳转详情
          customerInfo(kId){

            this.$router.push({name: 'customerInfo',params:{
                url:"customer",
                kid:kId
              }});
          }
        },
      mounted(){
          // this.getCustomerList();
      }
    }
</script>

<style scoped>
  .member-search{
    width:100%;
    position: fixed;
    top:0;
    left:0;
    background: #fff;
    z-index: 999;
  }
   .customer .van-search__action{
     border:1px solid;
    box-sizing: border-box;
    margin-left:5%!important;
  }
  .customer-content{
    margin-top:46px;
    margin-bottom:30px;
    font-size:18px!important;
    color:#666;
    padding:5px;
    /*background: skyblue;*/
  }
  .customer-content .van-button{
    height:auto;
    line-height: inherit;
  }
  .customer-content .iconfont{
    font-size:12px;
    margin-right:5px;
  }
  .customer-footer{
    position: fixed;
    bottom:0;
    left:0;
    border-top:1px solid #ddd;
    width:100%;
    font-size:12px;
    height:30px;
    line-height: 30px;
    background: #fff;
  }
  .van-search{
    box-sizing: border-box;
    padding:6px 15px;
  }
  .customer-content .icon-dingwei{
    font-size:16px;
  }


</style>
